<template lang="">
    <div class="count">
        <!-- 模板里面可以看到vc身上的所有的东西 -->
       <h1>当前求和：{{sum}}</h1>
       <h1>当前求和放大10倍：{{bigSum}}</h1>
       <h1>学校：{{school}}</h1>
       <select v-model.number="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2">3</option>
       </select>
       <button @click="increment(number)">+</button>
       <button @click="decrement(number)">-</button>
       <button @click="incrementOdd(number)">当前求和为奇数再加</button>
       <button @click="incrementWait(number)">等一等再加</button>
       <h1 style="color: red;">下方组件的总人数是(显示数据共享)：{{personList.length}}</h1>
    </div>
</template>
<script>
    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    export default {
        name:"Count",
        data(){
            return{
                number:1,//用户选择的数字
            }
        },
        mounted() {
            console.log(this)
        },
        methods: {
            ...mapMutations({increment:'AFun',decrement:'SFun'}),
            ...mapActions({incrementOdd:'addOddFun',incrementWait:'addWaitFun'}),
        },
        computed:{
            ...mapState(['sum','school','personList']),
            ...mapGetters(['bigSum'])
        }
    }
</script>
<style lang="less" scoped>
    button{
        margin: 5px;
    }
</style>